<template>
    <div class="user-home">
        <el-container class="user-home-container">
            <el-main>
                <Carousel />
                <AboutUs />
                <OurServices />
                <MessageBoard />
                <ContactUs />
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
    import Header from "@/components/Header.vue";
    import Carousel from "@/components/Carousel.vue";
    import AboutUs from "@/components/AboutUs.vue";
    import OurServices from "@/components/OurServices.vue";
    import ContactUs from "@/components/ContactUs.vue";
    import MessageBoard from "@/components/MessageBoard.vue";
    import Footer from "@/components/Footer.vue";
</script>

<style scoped>
    .user-home-container {
        display: flex;
        flex-direction: column;
    }
    .header-container {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .logo {
            color: #4a7b26;
        }
    }
    .header-menu {
        width: 80%;
        display: flex;
        justify-content: center;
    }
</style>
